<div class="row title-bar">
    <div class="col-xs-6">
        <button class="btn btn-success" (click)="addNew(addModal)">
          <i class="glyphicon glyphicon-plus-sign"></i> 添加</button>
    </div>


</div>

<table class="table table-striped mt20">
  <thead>  
    <tr>
        <th>ID</th>
        <th>昵称</th>
        <th>姓名</th>
        <th>密码</th>
        <th>权限</th>
        <th>操作</th>
    </tr>
  </thead>
  <tbody *ngIf="array.length!==0">
    <tr *ngFor="let data of array">
        <td>{{data.id || '--'}}</td>
        <td>{{data.nickname || '--'}}</td>
        <td>{{data.name || '--'}}</td>
        <td>{{data.password || '--'}}</td>
        <td>{{data.role == 0 ? '超级管理员' : '普通管理员'}}</td>

      <td>
        <button type="button" title="删除" class="btn btn-default glyphicon glyphicon-trash" (click)="delete(data, deleteModal)"></button>
        <button type="button" title="编辑" class="btn btn-default glyphicon glyphicon-pencil" (click)="edit(data, addModal)"></button>
      </td>  
    </tr>  
  </tbody>
</table>
<p *ngIf="array.length ===0" class="txt-center">暂无数据</p>

<!-- add | edit -->
<div id='add' name='add' class="modal fade" bsModal #addModal="bs-modal" [config]="{backdrop: 'static'}"
     tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title darkGreen">
            <span *ngIf="addOrEdit === 'add'">添加管理员</span>
            <span *ngIf="addOrEdit === 'edit'">编辑管理员信息</span>
        </h4>
        <button type="button" class="close pull-right" aria-label="Close" (click)="addModal.hide()">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
       <!-- form-box -->
        <form novalidate class="form-horizontal">
            <div class="form-group">
              <label for="inputPassword3" class="col-sm-3 control-label"><span class="required" title="必填">*</span>姓名：</label>
              <div class="col-sm-9">
                <input class="form-control" type="text" [(ngModel)]="name" name="name" placeholder="请输入管理员姓名" required (ngModelChange)='ngChangedFn()'>
              </div>
            </div>
            <div class="form-group">
              <label for="inputPassword3" class="col-sm-3 control-label"><span class="required" title="必填">*</span>昵称：</label>
              <div class="col-sm-9">
                <input class="form-control" type="text" [(ngModel)]="nickname" name="nickname" placeholder="请输入昵称" required (ngModelChange)='ngChangedFn()'>
              </div>
            </div>
            <div class="form-group">
              <label for="inputPassword3" class="col-sm-3 control-label"><span class="required" title="必填">*</span>密码：</label>
              <div class="col-sm-9">
                <input type="password" class="form-control" [(ngModel)]="pass" name="pass"  placeholder='输入密码' required (ngModelChange)='ngChangedFn()'> 
              </div>
            </div>
            <div class="form-group">
                <label for="inputPassword3" class="col-sm-3 control-label"><span class="required" title="必填">*</span>权限：</label>
                <div class="col-sm-9">
                    <select required class="col-sm-3 form-control" style="width:300px !important; " [(ngModel)]="roleId" name="roleId">
                        <option class="col-md-1" *ngFor="let role of roles" [value]="role.id">{{role.name}}</option>  
                    </select> 
              </div>
            </div>
            <div class="form-group" *ngIf='isEmpty === true' style="text-align: center; ">
              <div class="col-lg-12 col-md-12 col-sm-12 required">
                  <i class="glyphicon glyphicon-info-sign"></i>必填字段不可为空
              </div>
            </div>
            <div class="form-group" style="text-align: center; ">
              <div class="col-lg-12 col-md-12 col-sm-12">

                <button type="submit" class="btn btn-success"
                    (click)="onSubmit(id, nickname, name, pass, roleId, addModal)">
                   确定
                </button>
                <button type="button" class="btn btn-info" (click)="addModal.hide()">取消</button>
              </div>
            </div>
          </form>
      </div>
    </div>
  </div>
</div>

<!--delete -->
<div id='delete' name='delete' class="modal fade deleteModal" bsModal #deleteModal="bs-modal" [config]="{backdrop: 'static'}"
     tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title pull-left darkGreen">删除</h4>
        <button type="button" class="close pull-right" aria-label="Close" (click)="deleteModal.hide()">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body txt-center">
        <p style="margin-bottom: 20px;">是否删除此数据</p>

          <button type="submit" class="btn btn-success" (click)="deleteConfirm(data,deleteModal)">确认</button> 
          <button type="submit" class="btn btn-info" (click)="deleteModal.hide()">取消</button>
      </div>

    </div>
  </div>
</div>
